
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>在线加密解密</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="https://lib.baomitu.com/twitter-bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/core-min.js"> </script>
    <script type="text/javascript" src="js/enc-base64-min.js"> </script>
    <style>
    	div#mainContent{  }
    	.wrapper{width:1000px;margin:0 auto;}
    	.toolName{line-height:24px;font-size:24px;color:#777;margin-top:10px;}
    	.toolUsing{margin-top:30px;}
    	.leftBar{float:left;}
    	.rightBar{float:right;}
    	.leftBar textarea,.rightBar textarea{width:410px;height:500px;}
    	#mainContent textarea,#mainContent input[type='text']{border:1px solid #ccc;}
    	.operateLR{float:left;width:136px;text-align:center;margin:30px 5px 0 5px;}
    </style>

</head>
    
<body>
    <style>
	.hd-c{max-width:1200px;margin-left:auto;margin-right:auto;}
	.hd-c nav a{color:#f7f7f7;display:block;padding:0px 10px;text-align:center;text-decoration:none;font-size:16px;min-width:86px;transition:0.4s;height:52px;line-height:52px;}
	.hd-c nav{display:flex;padding:0;}
	header{background-color:#111111;position:fixed;width:100%;left:0;right:0;height:52px;}
	.hd-c nav a +a{margin-left:15px;}
	.hd-c nav a:hover{background-color:#3e3e3e;}
	.hd-c nav a.cur{background-color:#009688;}
</style>
<header>
	<div class="hd-c">
		<nav>
			<a href="http://www.d163.net">首页</a>
			<a href="http://www.d163.net/about/">关于我</a>
			<a href="http://www.d163.net/zanshang/">赞赏我</a>
			<a href="http://www.d163.net/tools/" class="cur">在线工具</a>
			<a href="http://www.d163.net/guestbook/">给我留言</a>
		</nav>
	</div>
</header>
<div style="height: 70px;"></div>    <div id="mainContent" class="wrapper">
        <div class="toolName">
            在线加密解密            
        </div>
        <div class="toolUsing clearfix">
            <div class="toolsTab  clearfix">
                <ul class="nav nav-tabs">
                    <li class='active'>
                        <a href="###"> BASE64 </a>
                    </li>
                </ul>
                <div class='clear'>
                </div>
            </div>
            <div class="leftBar">
                <div class="title">
                    明文:
                </div>
                <textarea name='message' id='source' class='text_source'>I love You! 我爱你</textarea>
            </div>
            <div class="operateLR">
                <div class="OptDetail Button">
                    <button class="btn btn-primary" onclick="base64_encode();"
                    style="margin-bottom:10px;">
                        BASE64编码
                        <i class="icon-chevron-right icon-white">
                        </i>
                    </button>
                    </li>
                    <button class="btn btn-primary" onclick="base64_decode();">
                        <i class="icon-chevron-left icon-white">
                        </i>
                        BASE64解码
                    </button>
                    </li>
                </div>
            </div>
            <div class="rightBar">
                <div class="title">
                    BASE64:
                </div>
                <textarea name='cipher' id='result'></textarea>
            </div>
            <script>
                function base64_encode() {
                    var str = CryptoJS.enc.Utf8.parse($("#source").val());
                    var base64 = CryptoJS.enc.Base64.stringify(str);
                    $("#result").val(base64);
                }
                function base64_decode() {
                    var words = CryptoJS.enc.Base64.parse($("#result").val());
                    $("#source").val(words.toString(CryptoJS.enc.Utf8));
                }
            </script>
        </div>
        
    </div>
</body>
</html>